<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
  <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i>库存管理</el-breadcrumb-item>
  <el-breadcrumb-item>房间管理</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider content-position="left"></el-divider>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          房间类型:
          <template>
            <el-select v-model="selectedValue" @change="handleSelect()" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.productName"
                  :label="item.label"
                  :value="item.productName">
              </el-option>
            </el-select>
            <el-button type="primary" @click="range">刷新</el-button>
          </template>
        </div>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="dialogVisible=true">新增房间</el-button>
        <el-dialog title="新增房间" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
          <el-form :model="form" :rules="rules1" ref="form" label-width="120px" @submit.native="formSubmit()">
            <el-form-item label="房间ID" prop="id">
              <el-input v-model="form.id" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="房间编号" prop="productCode">
              <el-input v-model="form.productCode" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="房间名称" prop="productName">
              <el-input v-model="form.productName" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="新增数量" prop="reduceCount">
              <el-input v-model="form.reduceCount" style="width: 80%"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save('form')">确 定</el-button>
         </span>
        </el-dialog>
      </el-col>
      <el-col :span="2">
        <el-button type="danger" @click="dialogVisible1=true">删除房间</el-button>
        <el-dialog title="删除房间"   :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
          <el-form :model="deleteMessage" :rules="rules2" ref="deleteMessage" label-width="120px" @submit.native="deleteSubmit()">
            <el-form-item label="房间ID" prop="id">
              <el-input v-model="deleteMessage.id" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="房间编号" prop="productCode">
              <el-input v-model="deleteMessage.productCode" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="房间名称" prop="productName">
              <el-input v-model="deleteMessage.productName" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="删减数量" prop="reduceCount">
              <el-input v-model="deleteMessage.reduceCount" style="width: 80%"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="deleteInventory('deleteMessage')">确 定</el-button>
         </span>
        </el-dialog>
      </el-col>
      <el-col :span="2">
        <el-button type="info" plain @click="exportInventory">导出</el-button>
      </el-col>

    </el-row>
  </div>

  <el-divider content-position="left"></el-divider>
  <el-table :data="tableData"  border style="width: 100%">
    <el-table-column prop="id" label="房型ID" width="80" align="center"></el-table-column>
    <el-table-column prop="productName" label="房型名称" header-align="center"
                     :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="productQuantity" label="房间数量" width="150" align="center" header-align="center"
                     :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="productCode" label="房间编码" width="150" align="center" header-align="center"
                     :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="gmtModified" label="最后操作时间" width="150" header-align="center"
                     :show-overflow-tooltip="true"></el-table-column>

    <el-table-column label="操作" width="120" align="center">
      <template slot-scope="scope">
        <el-button type="primary" plain class="op_button"  @click="dialogVisible2=true">修改信息</el-button>
        <el-dialog title="修改信息"  :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
          <el-form :model="updateMessage" :rules="rules3" ref="updateMessage" label-width="120px" @submit.native="updateSubmit()">

            <el-form-item label="房间ID" prop="id">
              <el-input v-model="updateMessage.id" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="房间编号" prop="productCode">
              <el-input v-model="updateMessage.productCode" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="房间名称" prop="productName">
              <el-input v-model="updateMessage.productName" style="width: 80%"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="handleSave('updateMessage')">确 定</el-button>
         </span>
        </el-dialog>
      </template>
    </el-table-column>
  </el-table>

  <div class="block">
    <el-pagination
        @current-change="changePage"
        hide-on-single-page
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total,prev, pager, next"
        :total="total">
    </el-pagination>
  </div>

</div>
</template>

<script>
import axios from 'axios';
export default {
  name: "InventoryIndex",
  data(){
    return{
      rules1:{
        id:[
          { required: true, message: '请输入房间ID', trigger: 'blur' },
            ],
        productName:[
          { required: true, message: '请输入房间名称', trigger: 'blur' },
        ],
        productCode:[
          { required: true, message: '请输入房间编号', trigger: 'blur' },
        ],
        reduceCount:[
          { required: true, message: '请输入增加量', trigger: 'blur' },
        ],
      },
      rules2:{
        id:[
          { required: true, message: '请输入房间ID', trigger: 'blur' },
        ],
        productName:[
          { required: true, message: '请输入房间名称', trigger: 'blur' },
        ],
        productCode:[
          { required: true, message: '请输入房间编号', trigger: 'blur' },
        ],
      },
      rules3:{
        id:[
          { required: true, message: '请输入房间ID', trigger: 'blur' },
        ],
        productName:[
          { required: true, message: '请输入房间名称', trigger: 'blur' },
        ],
        productCode:[
          { required: true, message: '请输入房间编号', trigger: 'blur' },
        ],
        reduceCount:[
          { required: true, message: '请输入增加量', trigger: 'blur' },
        ],
      },
      options:[],
      selectedValue:"",
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      currentPage: 1,
      pageSize: 0,
      total: 0,
      tableData:[],
      form:{
        id:0,
        productCode:"",
        productName:"",
        reduceCount:0,
      },
      updateMessage:{
        id:0,
        productCode:"",
        productName:"",
      },
      deleteMessage:{
        id:0,
        productCode:"",
        productName:"",
        reduceCount:0,
      },
    }
  },
  methods:{
    range() {
      this.loadInventoryList();
    },
    exportInventory(){
        if (!this.selectedValue.length){
          window.open('http://localhost:9902/inventory/export?productName='+this.selectedValue)
          // window.open('http://localhost:9902/inventory/export?token=' + this.user.token)
        }
    },

    fetchData() {
      axios.get('http://localhost:9902/inventory/selectName') //
          .then(response => {
            this.options = response.data.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
    handleSelect() {
      console.log("Selected value:", this.selectedValue);
      axios.get('http://localhost:9902/inventory/selectSearch',{params:{selectedValue:this.selectedValue}}) //
          .then(response => {
            this.currentPage = 1;
            this.pageSize = 1;
            this.total = 1;
            this.tableData = response.data.data;
          })
          .catch(error => {
            console.error(error);
          });
      // // 可以根据需要调用 fetchData 方法重新获取数据
      // this.fetchData();
    },
    deleteSubmit(){

    },
    deleteInventory(formName){
        this.deleteSubmit();
      this.$refs[formName].validate((valid) => {
            if (valid){
      axios.post('http://localhost:9902/inventory/reduce/count', this.deleteMessage)
          .then(response => {
            if (response.data.state==20000){
              this.dialogVisible1 = false; // 隐藏对话框
              confirm("删除成功!")
              this.loadInventoryList();
            }else {
              confirm(response.data.message);
            }

            // 处理你的响应数据
          })
          .catch(error => {
            // 处理错误
          });
            }
      });
    },
    getList(){
    },
    updateSubmit(){

    },
    handleSave(formName){
      this.updateSubmit();
      this.$refs[formName].validate((valid) => {
            if (valid){
      axios.post('http://localhost:9902/inventory/update', this.updateMessage)
          .then(response => {
            if (response.data.state == 20000){
              this.dialogVisible2 = false; // 隐藏对话框
              confirm("修改成功!")
              this.loadInventoryList();
            }else {
              confirm(response.data.message);
            }
            // 处理你的响应数据
          })
          .catch(error => {
            // 处理错误
          });
            }
      });
    },
    changePage(page) {
      this.$router.replace('?page=' + page);
      this.loadInventoryList();
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    formSubmit() {

    },
    save(formName) {
      this.formSubmit();
      this.$refs[formName].validate((valid) => {
        if (valid){
          axios.post('http://localhost:9902/inventory/add/count', this.form)
              .then(response => {
                if (response.data.state == 20000){
                  this.$message({
                    message: '新增房间成功！',
                    type: 'success'
                  });
                  this.dialogVisible = false; // 隐藏对话框
                  this.loadInventoryList();
                }else {
                  confirm(response.data.message);
                }

                // 处理你的响应数据
              })
              .catch(error => {
                // 处理错误
              });
        }else {
          return false;
        }
      });
    },
    loadInventoryList(){
      let page = this.$router.currentRoute.query.page;
      if (!page){
        page=1
      }
      let url = 'http://localhost:9902/inventory/selectAll?page='+page;
      axios.get(url)
          .then(response => {
            let jsonResult =response.data;
            if (jsonResult.state == 20000){
              this.currentPage = jsonResult.data.pageNum;
              this.pageSize = jsonResult.data.pageSize;
              this.total = jsonResult.data.total;
              this.tableData = jsonResult.data.list;
            }else {
              this.$alert(jsonResult.message,'错误',{
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },


  },
  created() {

  },
  mounted() {
    this.loadInventoryList();
    this.fetchData();
  }
}
</script>

<style scoped>

</style>